<template>
  <div class="device-details">
    <p>设备名称: {{ deviceData.probe_name }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits } from 'vue';
import { defineProps } from 'vue';
import { deviceDataService } from "@/services";

const props = defineProps(['deviceId']);
const emit = defineEmits(['updateDeviceName']);
const deviceData = ref({});
const formattedTotalElectricity = ref('');

onMounted(async () => {
  try {
    const response = (await deviceDataService.getDayDataService(props.deviceId)).data.time_series_data[props.deviceId];
    deviceData.value = response;
    formatElectricity();
    emit('updateDeviceName', deviceData.value.probe_name);
  } catch (error) {
    console.error("Error fetching device details:", error);
  }
});

function formatElectricity() {
  if (deviceData.value.total_ele_quantity !== undefined) {
    formattedTotalElectricity.value = `${(deviceData.value.total_ele_quantity / 1000).toFixed(2)} 度`;
  } else {
    formattedTotalElectricity.value = '数据不可用';
  }
}
</script>

<style scoped>
.device-details {
  background-color: transparent;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 30px;
}
</style>